<template>
    <div class="login_container">
        <el-card :body-style="{ padding: '0px' }" style="background: transparent;overflow: hidden">
            <div class="center_container flex" style="overflow: hidden">
                <!--            左边-->
                <div style="flex: 1;background: rgba(112,112,112,0.5)" class="padding_10 white_color">
                    <p class="margin_10 margin_top_30">欢迎回来， 请登录！</p>
                    <el-divider class="margin_10">

                    </el-divider>
                    <el-image
                            class="margin_top_30"
                            src="logo.png"
                    >

                    </el-image>
                    <p class="margin_10">健身房系统管理端</p>

                </div>

                <div class="flex_1 bg_white padding_10">
                    <h2 class="margin_top_30">用户登录</h2>
                    <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="75px"
                             @submit.native.prevent
                             class="demo-ruleForm margin_top_10" label-position="left" v-loading="contentLoading">
                        <el-form-item prop="loginUserName" label="用户名:">
                            <el-input @keyup.enter.native="login" v-model="formData.loginUserName" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item prop="loginPassWord" label="密码:">
                            <el-input @keyup.enter.native="login" type="password" v-model="formData.loginPassWord" placeholder="请输入密码"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button class="width_100" type="primary" @click="login">登录</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import md5 from 'js-md5';

    export default {
        name: "Login",
        data() {
            return {
                contentLoading: false,
                formData: {},
                config:{},
                rules: {
                    loginUserName: [
                        {required: true, message: '请输入登录账号', trigger: 'blur'},
                    ],
                    loginPassWord: [
                        {required: true, message: '请输入登录密码', trigger: 'change'}
                    ]
                }
            }
        },
        created() {
        },
        methods: {
            login: function () {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        // 保存数据
                        const that = this;
                        this.contentLoading = true;
                        var submitData = this.simpleClone(this.formData);
                        submitData.loginPassWord = md5(submitData.loginPassWord);
                        this.requestPost('/class_api/admin/login', submitData, function (res) {
                            that.handleInfo(res, '登录成功!');
                            that.contentLoading = false;
                            if(res.success&&res.data){
                                var token = res.data.token;
                                var user = res.data;
                                that.saveToken(token);
                                that.saveUser(user);
                                that.pushUrl('/custom');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            }
        }
    }
</script>

<style scoped>

    .login_container {
        background: url("../assets/login_bg.jpg") bottom no-repeat;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }

    .center_container {
        margin: auto auto;
        margin-top: 15%;
        width: 800px;
    }
</style>
